<template>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{name}}关系数量统计</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="getEveryData"><i class="el-icon-refresh"></i></el-button>
        </div>
        <div id="showtablemain" style="width: auto;height:300px;"></div>
      </el-card>
      <el-tabs type="border-card">
        <template v-for="(item,i) in relationList[usewhat]">
          <el-tab-pane :key='i' :label=item><RelationCoreList :relname=item :limit=limitnum :type=name></RelationCoreList></el-tab-pane>
        </template>
      </el-tabs>
    </div>
</template>
<script>
import axios from 'axios'
import echarts from 'echarts'
import RelationCoreList from '@/components/Functions/Statis/RelationCoreList'
export default {
  name: 'RelationCore',
  data () {
    return {
      target: 'http://127.0.0.1:8001/statistics',
      relationList: [['头衔', '势力', '种族',
        '死亡', '别名', '出生', '配偶', '兄弟姐妹', '父亲', '继承人',
        '子嗣', '全称', '王室', '统治时期', '封君', '好友', '不和', '母亲',
        '继承', '宗教', '恋情', '继位方式', '家徽', '封地', '现任领主', '所属地域',
        '效忠于', '建立于', '建立者', '埋葬', '加冕', '类型', '方位', '执政者',
        '个人纹章', '性别', '状态', '家庭'],
      ['头衔', 'name', '家徽', '封地', '现任领主', '所属地域', '效忠于', '建立于',
        '箴言', '祖传武器', '分支家族', '封号', '创建', '继承人', '建立者', '灭亡于', '灭亡'],
      ['name', '建立于', '宗教', '类型', '方位', '执政者', '名称由来', '知名地点']],
      relationData: [],
      poststr: '',
      limitnum: '1000'
    }
  },
  props: {
    name: String,
    usewhat: Number
  },
  mounted () {
    this.getEveryData()
  },
  components: {
    RelationCoreList
  },
  methods: {
    getEveryData () {
      var that = this
      that.poststr = ''
      that.relationData = []
      for (var i = 0; i < that.relationList[that.usewhat].length - 1; i++) {
        that.poststr += that.relationList[that.usewhat][i] + ','
      }
      that.poststr += that.relationList[that.usewhat][that.relationList[that.usewhat].length - 1]
      const datapost = new FormData()
      datapost.append('arr', that.poststr)
      datapost.append('type', that.name)
      axios.post(that.target + '/getArrayNum', datapost).then(function (ret) {
        that.relationData = ret.data.numarr
        console.log(that.relationData)
        that.getTable()
      })
    },
    getTable () {
      var that = this
      var myChart = echarts.init(document.getElementById('showtablemain'))
      myChart.setOption({
        title: {
          text: that.name
        },
        tooltip: {},
        dataZoom: [
          { // 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10, // 左边在 10% 的位置。
            end: 60 // 右边在 60% 的位置。
          },
          { // 这个dataZoom组件，也控制x轴。
            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            start: 10, // 左边在 10% 的位置。
            end: 60 // 右边在 60% 的位置。
          }
        ],
        xAxis: {
          data: that.relationList[that.usewhat]
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: that.relationData
        }]
      })
    }
  }
}
</script>
